<template>
    <div class="bigbox">
      <ETable :delelteAll="delBloodAll" :delelte="delBlood" :columns="columns" :loadData="getBlood"
        :isPage="true" :pageSize="[10, 20, 30]" ref="table">
  
        <template #search="{ params, search, reset }">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="老人姓名:">
              <el-input v-model="params.name" placeholder="请输入老人姓名" clearable />
            </el-form-item>
            <el-form-item label="床位:">
              <el-input v-model="params.begName" placeholder="请输入床位" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
  
        <template #buttons="{ delAll }">
          <el-button type="success" @click="add">增加</el-button>
          <el-button type="danger" @click="delAll">批量删除 </el-button>
        </template>
  
        <template #operation="{row , del}">
          <el-link type="primary" underline='false' @click="EDITOR(row.id,row.elderlyName,row.bloodPressure,row.pulse)">编辑</el-link>
  
          <el-link type="danger" underline='false' class="jiahua" @click="del(row.id)">删除</el-link>
        </template>
  
      </ETable>
  
      <el-dialog v-model="open" title="编辑血压记录">
        <el-form>
          <el-form-item label="老人姓名">
            <el-button  @click="add2">{{form.elderlyName}}</el-button>
          </el-form-item>
          <el-form-item label="血压">
            <el-input v-model="form.bloodPressure" />
          </el-form-item>
          <el-form-item label="脉搏">
            <el-input v-model="form.pulse" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="open=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog v-model="open2" title="选择老人">
      <el-form>
        <ETable :columns="columns2" :loadData="getelderly" :isPage="false" :pageSize="[10, 20, 30]" ref="table">
          <template #search="{ params, search, reset }">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="老人姓名:">
                <el-input style="width: 120px;" v-model="params.name" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="身份证号:">
                <el-input style="width: 120px;" v-model="params.idCard" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>

          <template #operation>

            <el-button type="primary" @click="">选择</el-button>
          </template>

          <template #photo="{ row }">
            <el-image style="width: 50px; height: 50px" :src="imgUrl + row.photo" :zoom-rate="1.2" :max-scale="7"
              :min-scale="0.2" :preview-src-list="[imgUrl + row.photo]" :initial-index="4" fit="cover"
              preview-teleported />
          </template>
        </ETable>
      </el-form>
    </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  
  import ElMessage from 'element-plus/es/components/message/index.mjs';
  import { getelderly } from '../../apis/medicalcare/MedicineLogs/MedicineLogs';
import { getBlood,delBlood,delBloodAll,editBlood } from '../../apis/medicalcare/blood/blood';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref, useTemplateRef } from 'vue';
  import router from '@/router';
  
  const imgUrl = import.meta.env.VITE_IMG_URL;
  const table=useTemplateRef('table')
  const form = reactive({
    id:0,
    elderlyId:0,
    elderlyName: '',
    bloodPressure:'',
    pulse:''
  
})
  
  const open = ref(false)
  const open2 = ref(false)

  const add = () => {
    open.value = true
  }
  const add2 = () => {
    open2.value = true
  }
  
  const EDITOR=(id:number,name:string,content:string,pulse:string)=>{
    open.value=true
    form.elderlyName=name
    form.bloodPressure=content
    form.pulse=pulse
 console.log(id,name);
}
const submit=()=>{
  editBlood(form).then(res=>{
    console.log(res);
    ElMessage('修改成功')
    table.value!.getData()
  })
  open.value=false
  form.elderlyName=''
  form.bloodPressure=''
  form.pulse=''
}
  
  const columns = reactive<ColumnType[]>([
    {
      prop: 'id',
      label: '序号',
      width: '',
    },
    {
      prop: 'addTime',
      label: '统计日期',
      width: '',
    },
    {
      prop: 'addAccountName',
      label: '记录人',
      width: '',
    },
    {
      prop: 'elderlyName',
      label: '老人姓名',
      width: '',
    },
    {
      prop: 'begName',
      label: '床位',
      width: '',
    },
    {
      prop: 'bloodPressure',
      label: '血压',
      width: '',
    },
    {
      prop: 'pulse',
      label: '脉搏',
      width: '',
    },
    {
      prop: 'operation',
      label: '操作',
      slot: true,
      width: '',
    },
  ])
  
  const columns2 = reactive<ColumnType[]>([
  {
    prop: 'name',
    label: '老人姓名',
    width: '',
  },
  {
    prop: 'photo',
    label: '头像',
    width: '',
    slot: true,
  },
  {
    prop: 'idCard',
    label: '身份证号',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
])
  
  </script>
  
  <style scoped>
  .jiahua {
    margin-left: 20px;
  }
  
  .search_top2 {
    margin-left: 10px;
    margin-top: 10px;
  }
  
  .search_top {
    width: 200px;
    display: inline-block;
  }
  
  .search {
    width: 100%;
    height: 100px;
    background-color: #fff;
    overflow: hidden;
  }
  </style>